<template>
  <div>
    <h2>{{ message }}</h2>
    <div>
      <el-button type="success" icon="el-icon-plus" @click="MenuClick">
        新增</el-button
      >
      <div class="left">
        <el-input placeholder="查找..."></el-input
        ><el-button class="el-icon-search"></el-button>
      </div>
      <el-table
        :data="tableData"
        style="width: 100%"
        :row-class-name="tableRowClassName"
      >
        <el-table-column prop="name" label="名称" width="180">
        </el-table-column>
        <el-table-column prop="images" label="图片" width="180">
        </el-table-column>
        <el-table-column prop="paths" label="路径"> </el-table-column>
        <el-table-column prop="types" label="类型" width="100">
        </el-table-column>
        <el-table-column prop="Sorting" label="排序" width="100">
        </el-table-column>
        <el-table-column prop="display" label="显示" width="100">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="500">
          <template slot-scope="scope">
            <div class="flex">
              <el-button
                type="info"
                size="mini"
                icon="el-icon-top"
                @click="UpBtnClick(scope.row)"
                >上移</el-button
              >
              <el-button
                type="info"
                size="mini"
                icon="el-icon-bottom"
                @click="UpBtnClick(scope.row)"
                >下移</el-button
              >
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-edit-outline"
                @click="UpBtnClick(scope.row)"
                >修改</el-button
              >
              <el-button
                type="danger"
                size="mini"
                icon="el-icon-close"
                @click="UpBtnClick(scope.row)"
                >删除</el-button
              >
              <el-button
                type="success"
                size="mini"
                icon="el-icon-plus"
                @click="UpBtnClick(scope.row)"
                >增加</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: "MenuManagement",

  methods: {
    tableRowClassName({ rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },
    UpBtnClick(row) {
      console.log("获取到第n条数据", row);
    },
    MenuClick() {
      this.$router.replace("/home/ViewportMenu/AboutMenu");
    },
  },
  data() {
    return {
      message: "菜单管理",

      tableData: [
        {
          name: "权限管理",
          images: "fa-circle-o",
          paths: "#",
          types: "页面",
          Sorting: "0",
        },
        {
          name: "权限管理",
          images: "fa-circle-o",
          paths: "#",
          types: "页面",
          Sorting: "1",
        },
        {
          name: "权限管理",
          images: "fa-circle-o",
          paths: "#",
          types: "页面",
          Sorting: "2",
        },
        {
          name: "权限管理",
          images: "fa-circle-o",
          paths: "#",
          types: "页面",
          Sorting: "3",
        },
      ],
    };
  },
};
</script>

<style scoped>
.el-input {
  width: 150px;
}

.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

.left {
  display: inline-block;
  margin-left: 80%;
}

.flex {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
}
</style>